<template>
  <div>
    <el-select
      v-model="userIds"
      :multiple="multiple"
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
      :remote-method="remoteMethod"
      :loading="loading"
      @blur="getUserList"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { getAdminUserList } from "@/api/collegebase/colleges";
export default {
  props: {
    value: {
      type: [String, Array],
      default: "",
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    userIds(val) {
      if (this.valueLoading) return;

      this.$emit("input", val);
    },
    value: {
      immediate: true,
      handler(val) {
        this.valueLoading = true;
        this.userIds = val;
        setTimeout(() => (this.valueLoading = false), 500);
      }

    },
  },
  data() {
    return {
      options: [],
      userIds: [],
      loading: false,
      valueLoading: false,
    };
  },
  mounted() {
    this.getUserList();
  },
  methods: {
    remoteMethod(query) {
      this.loading = true;
      getAdminUserList({ findStr: query })
        .then((res) => {
          if (res.code == 0) {
            this.options = res.data.map((item) => {
              return {
                value: item.id,
                label: item.nickname,
              };
            });
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getUserList() {
      getAdminUserList().then((res) => {
        if (res.code == 0) {
          this.options = res.data.map((item) => {
            return {
              value: item.id,
              label: item.nickname,
            };
          });
        }
      });
    }
  },
};
</script>

<style lang="scss"></style>
